import React, { useState, useEffect } from 'react'
import './index.scss'
import type { MenuProps } from 'antd';
import { BellOutlined, RightOutlined } from '@ant-design/icons';
import { Dropdown, Space, Button, Modal, Form, Input, Divider, message } from 'antd';
import { getLogin, getList } from '../../request/index'

export default function title() {
    const Handtopersonage = () => {
        window.location.href = '/personage'
    }
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <p>屏幕营销</p>
            ),
        },
        {
            key: '2',
            label: (
                <p>视频协作</p>
            ),
        },
        {
            key: '3',
            label: (
                <p>公益版</p>
            ),
        },
        {
            key: '4',
            label: (
                <p>渠道合作</p>
            ),
        },
    ];
    // const [token, useToken] = useState('')
    const token = localStorage.getItem('token')
    // 弹框显示隐藏
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };
    const name = localStorage.getItem('name')

    // 登录
    const Login = () => {
        showModal()
    }
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };
    const onFinish = (values: any) => {
        getLogin(values).then(res => {
            alert(res.data.msg)
            if (res.data.code === 200) {
                console.log(res);
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('name', values.username)
                localStorage.setItem('userimg', res.data.userimg)
                setIsModalOpen(false);
            }
        })
    }
    const userimg = localStorage.getItem('userimg')
    const guanBi = () => {
        setIsModalOpen(false);
    }

    // const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    //     getLogin(values).then(res => {
    //         console.log(res);

    //     })
    // };
    const xiaoxi=()=>{
        window.location.href='../gaoding'
    }
    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:3333', errorInfo);
    };
    // 退出登录
    const [messageApi, contextHolder] = message.useMessage();
    const tuiChu = () => {
        if (confirm('是否退出登录')) {
            messageApi.info('退出登录成功!');
            localStorage.removeItem('token')
            setTimeout(() => {
                window.location.href = './RecommendForYou'
            }, 1000);
        }
    }
    const [showElement, setShowElement] = useState(false);
    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > 200) {
                setShowElement(true);
            } else {
                setShowElement(false);
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 搜索高亮
    const [data1, setData1] = useState([])
    useEffect(() => {
        getList().then(res => {
            setData1(res.data)
        })
    }, [])
    const [Search, setSearch] = useState('');

    // Determine filtered data
    const filteredData = Search
        ? data1.filter(item =>
            item.includes(Search)
        )
        : [];


    // 关键词高亮
    const highlightText = (text, highlight) => {
        if (!highlight.trim()) return text;
        const regex = new RegExp(`(${highlight})`, 'gi');
        return text.split(regex).map((part, index) =>
            regex.test(part) ? <span key={index} className="highlight">{part}</span> : part
        );
    };
    return (
        <div className='Title' style={{ display: "flex" }}>
            <Dropdown dropdownRender={
                menu => (
                    <div className='abcdefg'>
                        <ul className='uull'>
                            {filteredData.length > 0 ? (
                                filteredData.map((item, index) => (
                                    <li key={index}>{highlightText(item, Search)}</li>
                                ))
                            ) : (
                                <p>没有记录</p>
                            )}
                        </ul>
                    </div>
                )
            } placement="bottom" arrow>
                <a onClick={(e) => e.preventDefault()}>
                    <Space>
                        {showElement && <div className='xiding'>
                            <input type="text" placeholder=' 请输入您想输入的内容' className='in11' value={Search} onChange={e => setSearch(e.target.value)} />
                        </div>}
                    </Space>
                </a>
            </Dropdown>

            <Space direction="vertical">
                <Space wrap className=''>
                    <Dropdown dropdownRender={
                        menu => (
                            <div className='geRen' style={{ boxShadow: "10px 10px 10px 10px #ccc" }}>
                                <div className='TouXiang'>
                                    <img src={userimg} alt="" style={{ width: "45px", height: "45px", borderRadius: "50%" }} />
                                    <div>
                                        <h4>Ti amo</h4>
                                        <p>个人版</p>
                                    </div>
                                </div>
                                <Button style={{ marginLeft: "20%" }}>创建团队/企业</Button>
                            </div>
                        )
                    } arrow>
                        <b style={{ border: " 1px solid #CCC", }}>个人版</b>
                    </Dropdown>
                    <b>创客帖AI</b>
                    <b>企业设计服务</b>
                    <b>印刷操作</b>
                    <Dropdown menu={{ items }} placement="top" arrow dropdownRender={
                        menu => (
                            <div style={{ textAlign: "center", background: "#FFF", width: "200px", overflow: "hidden" }}>
                                <h3 style={{ margin: "10px 0", color: "#5a4dfe" }}>扫码下载创客贴APP</h3>
                                <img src="/src/assets/images/erweimma.png" alt="" style={{ width: "180px", margin: "0 15px" }} />
                                <p>同一账号,设计多端保存</p>
                                <p>随时随地,开启搞笑设计</p>
                            </div>
                        )
                    }>
                        <b>下载APP</b>
                    </Dropdown>
                    <Dropdown menu={{ items }} placement="top" arrow>
                        <b className='diandiandian'>...</b>
                    </Dropdown>
                </Space>
            </Space>
            <div style={{ marginLeft: "28%" }}>
                <Space direction="vertical">
                    {
                        token ? (
                            <Space wrap>
                                {/* vip会员 */}
                                <Dropdown placement="bottomRight" dropdownRender={
                                    menu => (
                                        <div style={{ background: "#FFF", overflow: "hidden", boxShadow: "2px 2px 2px 2px #ccc" }}>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip1.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />通用模版</h3>
                                                    <p style={{ color: "#666" }}>这个适合个人或企业1人使用,畅享无水印高清下载</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip2.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />协作版</h3>
                                                    <p style={{ color: "#666" }}>适合企业2~10人使用,资源共享/在线协作,企业商用授权.</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip3.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />协作版</h3>
                                                    <p style={{ color: "#666" }}>适合10人以上企业/多品牌/多连锁分支机构使用,功能可指定,商业授权范围广</p>
                                                </div>
                                            </div>
                                        </div>
                                        // 
                                    )
                                }>
                                    <Button style={{ display: "flex", background: "#fce0ca" }}><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" />VIP会员</Button>
                                </Dropdown>
                                {/* 企业服务 */}
                                <Dropdown placement="bottom" dropdownRender={
                                    menu => (
                                        <div style={{ background: "#FFF", overflow: "hidden", width: "300px", boxShadow: "2px 2px 2px 2px #ccc" }}>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>API开放平台</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>企业全端接入,易于集成,即可拥有智能设计能力</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>内容中台</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>企业营销内容流转,全链路解决方案</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>渠道合作</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>创客贴渠道代理/分销商招募,携手供应亿级红利</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>定制设计 <span style={{ background: "#0e86fd", color: "#FFF", borderRadius: "10px", fontSize: "12px", padding: "0 3px" }}>企业</span></h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>专业设计团队,专为企业提供规模化,高质量的创意设计服务</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>印刷制作 <span style={{ background: "#0e86fd", color: "#FFF", borderRadius: "10px", fontSize: "12px", padding: "0 3px" }}>企业</span></h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>印刷喷绘,产品包装,礼盒定制等一站式采购,支持在线下单</p>
                                                </div>
                                            </div>

                                        </div>
                                    )
                                }>
                                    <Button style={{ display: "flex", background: "#d8e6f8" }}><img src="https://www.chuangkit.com/print/img/enterprice_icon.ba2fd8fc.svg" alt="" />企业服务</Button>
                                </Dropdown>
                                {/* 铃铛 */}
                                <Dropdown placement="bottomRight" dropdownRender={
                                    menu => (
                                        <div style={{ background: "#000", color: "#fff", padding: "10px" }}  ><b onClick={xiaoxi}>消息通知</b></div>
                                    )
                                }>
                                    <div> <BellOutlined style={{ fontSize: "20px", margin: "0 20px" }} /> </div>
                                </Dropdown>
                                {/* 工作台 */}
                                <Button className='gongZuoTai' href='./workbench'>工作台</Button>
                                {/* 头像 */}
                                <Dropdown placement="bottom" dropdownRender={

                                    menu => (
                                        <div style={{ background: "#FFF", width: "200px", boxShadow: "2px 2px 2px 2px #ccc" }} >
                                            <p style={{ fontSize: "12px", marginLeft: "10px" }}>用户ID:{name}</p>
                                            <img src="/src/assets/images/yonghu.png" alt="" style={{ width: "100%" }} />
                                            <div style={{ margin: "10px" }}>
                                                <p style={{ color: "#666" }}>当前团队</p><br />
                                                <h4>个人版 <span style={{ float: "right" }}>创建团队<RightOutlined /></span></h4>
                                                <Divider />
                                                <ul className='ul1'>
                                                    <li>订单/发票</li>
                                                    <li>消息中心</li>
                                                    <li >个人中心</li>
                                                    <li>我的优惠卷</li>
                                                    <>
                                                        {contextHolder}
                                                        <li onClick={tuiChu}>退出登录</li>
                                                    </>

                                                </ul>
                                            </div>

                                        </div>
                                    )
                                }>
                                    <div onClick={Handtopersonage} style={{ width: '35px', height: '35px' }}> <img src={userimg} alt="" style={{ width: "35px", height: "35px", borderRadius: "50%", float: "right", }} /></div>
                                </Dropdown>
                            </Space>
                        ) : (
                            <Space wrap>
                                {/* vip会员 */}
                                <Dropdown placement="bottomRight" dropdownRender={
                                    menu => (
                                        <div style={{ background: "#FFF", overflow: "hidden", boxShadow: "2px 2px 2px 2px #ccc" }}>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip1.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />通用模版</h3>
                                                    <p style={{ color: "#666" }}>这个适合个人或企业1人使用,畅享无水印高清下载</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip2.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />协作版</h3>
                                                    <p style={{ color: "#666" }}>适合企业2~10人使用,资源共享/在线协作,企业商用授权.</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px", width: "350px" }}>
                                                <img src="/src/assets/images/vip/vip3.png" alt="" style={{ width: "100px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h3><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" style={{ float: "left" }} />协作版</h3>
                                                    <p style={{ color: "#666" }}>适合10人以上企业/多品牌/多连锁分支机构使用,功能可指定,商业授权范围广</p>
                                                </div>
                                            </div>
                                        </div>
                                        // 
                                    )
                                }>
                                    <Button style={{ display: "flex", background: "#fce0ca" }}><img src="https://www.chuangkit.com/print/img/open-vip-icon.6b2bd0e3.svg" alt="" />VIP会员</Button>
                                </Dropdown>
                                {/* 企业服务 */}
                                <Dropdown placement="bottom" dropdownRender={
                                    menu => (
                                        <div style={{ background: "#FFF", overflow: "hidden", width: "300px", boxShadow: "2px 2px 2px 2px #ccc" }}>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>API开放平台</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>企业全端接入,易于集成,即可拥有智能设计能力</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>内容中台</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>企业营销内容流转,全链路解决方案</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>渠道合作</h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>创客贴渠道代理/分销商招募,携手供应亿级红利</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>定制设计 <span style={{ background: "#0e86fd", color: "#FFF", borderRadius: "10px", fontSize: "12px", padding: "0 3px" }}>企业</span></h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>专业设计团队,专为企业提供规模化,高质量的创意设计服务</p>
                                                </div>
                                            </div>
                                            <div style={{ display: "flex", margin: "20px" }}>
                                                <img src="/src/assets/images/qiye.png" alt="" style={{ width: "60px" }} />
                                                <div style={{ marginLeft: "10px" }}>
                                                    <h4>印刷制作 <span style={{ background: "#0e86fd", color: "#FFF", borderRadius: "10px", fontSize: "12px", padding: "0 3px" }}>企业</span></h4>
                                                    <p style={{ color: "#666", fontSize: "12px" }}>印刷喷绘,产品包装,礼盒定制等一站式采购,支持在线下单</p>
                                                </div>
                                            </div>

                                        </div>
                                    )
                                }>
                                    <Button style={{ display: "flex", background: "#d8e6f8" }}><img src="https://www.chuangkit.com/print/img/enterprice_icon.ba2fd8fc.svg" alt="" />企业服务</Button>
                                </Dropdown>
                                {/* 登录注册 */}
                                <Button type="primary" onClick={Login}>登录注册</Button>
                                <Modal open={isModalOpen} footer={null} closable={false} width={"800px"}>
                                    <div className='LoginBox'>
                                        <div className="LoginLeft"></div>
                                        <div className="LoginRight">
                                            <div className='LoginInput'>
                                                <div className="X" onClick={guanBi}>X</div>
                                                <h3>账号密码登录</h3>
                                                <Form
                                                    name="basic"
                                                    labelCol={{ span: 8 }}
                                                    wrapperCol={{ span: 16 }}
                                                    style={{ maxWidth: 600 }}
                                                    initialValues={{ remember: true }}
                                                    onFinish={onFinish}
                                                    onFinishFailed={onFinishFailed}
                                                    autoComplete="off"
                                                >
                                                    <Form.Item<FieldType>
                                                        name="username"
                                                        rules={[{ required: true, message: '不能为空!' }]}
                                                    >
                                                        <Input placeholder='请输入邮箱/手机号' style={{ width: "350px", marginTop: "30px" }} />
                                                    </Form.Item>

                                                    <Form.Item<FieldType>
                                                        name="password"
                                                        rules={[{ required: true, message: '不能为空!' }]}
                                                    >
                                                        <Input.Password placeholder='请输入密码' style={{ width: "350px", marginTop: "12px" }} />
                                                    </Form.Item>

                                                    <Form.Item>
                                                        <div style={{ width: "350px", display: "flex", justifyContent: "space-between" }}>
                                                            <p>手机验证码登录</p>
                                                            <p>忘记密码</p>
                                                        </div>
                                                    </Form.Item>

                                                    <Form.Item>
                                                        <Button type="primary" htmlType="submit" style={{ width: "350px", height: "40px", }}>
                                                            登录
                                                        </Button>
                                                    </Form.Item>
                                                </Form>
                                            </div>
                                        </div>
                                    </div>
                                </Modal>
                            </Space>
                        )
                    }
                </Space>
            </div>
        </div>
    )
}
